<template>
	<div class="mainpage">
		<!-- 数据监控图表 -->
		<div style="flex: 1;" class="row1">
			<dv-border-box-8>
				<left-charts></left-charts>
			</dv-border-box-8>
		</div>

		<!-- 视屏翻牌器区域 -->
		<div style="flex: 1;" class="row1" >
			<dv-border-box-1>
				<mid-video></mid-video>
			</dv-border-box-1>
		</div>

		<!-- 数据监控图统计 -->
		<div style="flex: 1;" class="row1">
			<dv-border-box-8 :reverse="true">
				<right-charts></right-charts>
			</dv-border-box-8>
		</div>

		<div style="width: 100%;margin-top: 20rem;" class="row1">
			<dv-border-box-9>
				<bottom-charts></bottom-charts>
			</dv-border-box-9>
		</div>

	</div>
</template>
<script>
	const midVideo = () => import('./midVideo.vue')
	const leftCharts = () => import('./dataMonitoring/dmleft.vue')
	const rightCharts = () => import('./dataMonitoring/dmright.vue')
	const bottomCharts = () => import('./dataMonitoring/dmbottom.vue')
	export default {
		components: {
			midVideo,
			leftCharts,
			rightCharts,
			bottomCharts
		},
		name: 'mainpage',
		data() {
			return {}
		},
		mounted() {
			this.$store.commit('setload', false)
		}
	}
</script>
<style lang='scss'>
	.mainpage {
		width: 100%;
		display: flex;
		flex-flow: row wrap;

		.row1 {
			height: 320rem;
			margin: 0 5rem;
		}
	}
</style>
